<template>
  <div>
    <n-card hoverable>
      <div flex items-center>
        <n-avatar :round="true" :size="60" :src="userStore.avatar" />
        <div ml20>
          <p text-16>Hello, {{ userStore.name }}</p>
          <p op80 text-12 mt5>今天又是累得要死的一天</p>
        </div>
        <div flex ml-auto>
          <n-statistic label="待办" :value="4">
            <template #suffix> / 10 </template>
          </n-statistic>
          <n-statistic ml80 label="Stars">
            <n-number-animation ref="starsNumberRef" show-separator :from="0" :to="999" />
          </n-statistic>
          <n-statistic ml80 label="Forks">
            <n-number-animation ref="starsNumberRef" show-separator :from="0" :to="299" />
          </n-statistic>
        </div>
      </div>
    </n-card>

    <div ref="CardBox" mt-20 flex>
      <n-card title="项目" size="small" hoverable :segmented="true">
        <template #header-extra>
          <n-button text type="primary">更多</n-button>
        </template>
        <n-grid :x-gap="12" :y-gap="8" :cols="4">
          <n-grid-item v-for="i in 10" :key="i">
            <n-card title="Evil Admin" size="small" hoverable>
              <p op60>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>
            </n-card>
          </n-grid-item>
        </n-grid>
      </n-card>
    </div>
  </div>
</template>

<script setup>
import { useUserStore } from '@/store/modules/user';
const userStore = useUserStore();
</script>

<style lang="scss" scoped></style>
